<template>
  <div>
    <el-card class="pag-container">
      <el-row>
        <el-col :span="10">
          <span style="font-size: 14px;">{{ rowData.companyName }}</span>
          <div m="t-4">
            <el-carousel style="background-color: dimgrey;" trigger="click">
              <el-carousel-item v-for="item in mainFileList" :key="item" style="height: 100%;">
                <!-- <h3 class="small justify-center" text="2xl">{{ item.url }}</h3> -->
                <img :src="item.url" style="height: 100%;width: 100%" />
              </el-carousel-item>
            </el-carousel>
          </div>
        </el-col>
        <el-col :span="14">
          <div style="font-size: 14px;text-align: left; box-sizing: border-box;padding: 10px 40px 10px 40px;">
            <el-row :gutter="10">
              <el-col :span="11">
                <span style="font-weight: bolder;font-size: 16px;">{{ rowData.carryCityName }}</span>
                <div style="margin-top: 20px;">
                  提箱城市：{{ rowData.carryCityName }}/{{ rowData.carryCountryName }}
                </div>
              </el-col>
              <el-col :span="2"><img style="text-align: center; width: 17px;"
                  src="@/assets/icons/svg/right.svg"></el-col>
              <el-col :span="11" style="text-align: right;">
                <span style="font-weight: 800;font-size: 16px;">{{ rowData.returnCityName }}</span>
                <div style="margin-top: 20px;">
                  还箱城市：{{ rowData.returnCityName }}/{{ rowData.returnCountryName }}
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="14">
                <table style="font-size: 14px;width: 400px;margin-top: 30px; text-align: left;">
                  <tbody>
                  <tr style="width: 100px;">
                    <td>租赁单价</td>
                    <td style="font-weight: 600;"> ￥ {{ unitPrice }}</td>
                  </tr>
                  <tr>
                    <td>箱使期</td>
                    <td style="font-weight: 600;"> {{ rowData.boxUsagePeriod }} 天</td>
                  </tr>
                  <tr>
                    <td>箱型</td>
                    <td>
                      <el-radio-group v-model="param.boxType" @change="param.inventory = props.inventory">
                        <el-radio-button v-for="item in boxTypeList" :label="item.label" :key="item"
                          :value="item.value" />
                      </el-radio-group>
                    </td>
                  </tr>
                  <tr>
                    <td>箱况</td>
                    <td>
                      <el-radio-group v-model="param.boxCondition" @change="param.inventory = props.inventory">
                        <el-radio-button v-for="item in boxConditionList" :label="item.label" :key="item"
                          :value="item.value" />
                      </el-radio-group>
                    </td>
                  </tr>
                  <tr>
                    <td style="width:80px; ">租箱量</td>
                    <td>
                      <el-input-number v-model="param.num" :min="0" :max="param.inventory" @change="handleChange" />
                    </td>
                  </tr>
                  <tr>
                    <td style="width:80px; ">超期费</td>
                    <td>
                      <p>
                        超期1天，$10.00/箱/天,超期60天仍未还箱，视为灭失，灭失费$7000元
                      </p>
                    </td>
                  </tr>
                  <tr>
                    <td style="width:80px; ">结算账期</td>
                    <td>
                      <p>首次下单：先付后提，多次下单：提后10天内付</p>
                    </td>
                  </tr>
                  </tbody>
                </table>
                <div style="margin-top: 20px;text-align: center;">
                  <el-button type="primary" @click="handleSubmit">立即租箱</el-button>
                </div>
              </el-col>
            </el-row>
          </div>

        </el-col>
      </el-row>
    </el-card>

    <el-card class="pag-container">
      <span style="font-weight: 700;font-size: 15px;">
        <span style="width:3px;height:20px;background-color: #2158F3;"> &nbsp</span>租赁详情
      </span>
      <el-form inline label-width="60px" style="margin-top: 10px;" label-position="left">
        <el-form-item label="箱型：">{{ boxTypeFilter(param.boxType) }}</el-form-item>
        <el-form-item label="箱况:">{{ boxConditionFilter(param.boxCondition) }}</el-form-item>
        <el-form-item label="箱使期:">{{ rowData.boxUsagePeriod }} 天</el-form-item>
        <el-form-item label="总重:">{{ param.boxType > 10 ? '30480' : '30480/32500' }} KG</el-form-item>
      </el-form>

    </el-card>

    <el-card class="pag-container">
      <span style="font-weight: 700;font-size: 15px;">
        <span style="width:3px;height:20px;background-color: #2158F3;"> &nbsp</span>租赁介绍
      </span>
      <div v-for="item in detailFileList" style="width:100%;  ">
        <div v-for="img in item.imgInfo" style="width:100%;text-align: center;">
          <img :src="img.url" style="width:750px;height:auto;margin-top: 10px" />
        </div>
        <div style="box-sizing: border-box;padding: 10px;">{{ item.textVal }}</div>
      </div>
    </el-card>
  </div>
</template>
<script setup lang="ts">
import { reactive } from 'vue';

const emit = defineEmits(['handleSubmit'])

const props = defineProps({
  rowData: {
    type: Object,
    default: () => {
      return {}
    }
  },
  mainFileList: {
    type: Array,
    default: () => {
      return []
    }
  },
  boxTypeList: {
    type: Array,
    default: () => {
      return []
    }
  },
  boxConditionList: {
    type: Array,
    default: () => {
      return []
    }
  },
  inventory: {
    type: Number,
    default: 0
  },
  unitPrice: {
    type: Number,
    default: 0
  }

})

const param = reactive({
  boxType: 5,
  boxCondition: 5,
  num: 0,
  inventory: 0,
  boxTypeList: [],
  boxConditionList: []
})


const handleSubmit = () => {
  let data = {
    boxType: param.boxType,
    boxCondition: param.boxCondition,
    num: param.num,
    unitPrice: props.unitPrice.value,
    inventory: props.inventory.value
  }
  emit('handleSubmit', data)
}

//handleChange
const handleChange = (value: Number) => {
  console.log(value)
}

//过滤
const boxConditionFilter = (val: any) => {
  let result = ''
  const boxConditionList = [{ value: 15, label: '适货' }, { value: 10, label: '次新' }, { value: 20, label: '混提' },{ value: 5, label: '全新' }]
  boxConditionList.forEach((item: { value: any; label: any; }) => {
    if (item.value == val) {
      result = item.label
    }
  })
  return result
}
const boxTypeFilter = (val: any) => {
  let result = ''
  const boxTypeList = [{ value: 5, label: '40HQ' }, { value: 10, label: '40GP' }, { value: 15, label: '20HQ' }, { value: 20, label: '20GP' }]
  boxTypeList.forEach((item: { value: any; label: any; }) => {
    if (item.value == val) {
      result = item.label
    }
  })
  return result
}
</script>
<style scoped>
.pag-container {
  margin-top: 20px;
  box-sizing: border-box;
  padding: 10px;
}
</style>